<template>
  <div class="nofixedTop">
    <el-card class="bulletinbox"  v-if="isShow">
      <div class="clearfix">
        <div class="bulletinleft"><img src="@a/images/trump.png" alt="" /></div>
        <div class="bulletinText">
          <h3>公告</h3>
          <p>{{deskData.announcement}}</p>
        </div>
        <span class="closeBull el-icon-circle-close" @click="isShow = false"></span>
      </div>
    </el-card>
    <el-card class="processBox">
      <div class="processTitle"><p><img src="http://fat.teyunquan.com/front/threeTitle.bb47fbf.png" alt=""></p></div>
      <div class="processData">
        <div class="processList clearfix">
          <div class="processLeft">
            <span>第一步</span>
            <h2>信息录入</h2>
          </div>
          <div class="processRight">
            <div class="detail">
              <div class="left">
                <p class="title"><span><img src="@a/images/icon1.png" alt=""></span> <i>车辆</i></p>
                <div class="number">
                  <p><i>{{deskData.usable_truck}}</i><span>可使用</span></p>
                  <p><i>{{deskData.run_truck}}</i><span>流程中</span></p>
                </div>
              </div>
              <el-button class="btnAc btnS" @click="addTrucks"> + 新增</el-button>
            </div>
            <div class="detail">
              <div class="left">
                <p class="title"><span><img src="@a/images/icon3.png" alt=""></span> <i>司机</i></p>
                <div class="number">
                  <p><i>{{deskData.usable_driver}}</i><span>可使用</span></p>
                  <p><i>{{deskData.run_driver}}</i><span>流程中</span></p>
                </div>
              </div>
              <el-button class="btnAc btnS" @click="addDriver"> + 新增</el-button>
            </div>
          </div>
        </div>
        <div class="processList clearfix">
          <div class="processLeft">
            <span>第二步</span>
            <h2>账户充值</h2>
          </div>
          <div class="processRight">
            <div class="detail">
              <div class="left">
                <p class="title"><span><img src="@a/images/icon4.png" alt=""></span> <i>账户</i></p>
                <div class="number">
                  <p><i>{{deskData.balance_amount}}</i><span>余额/元</span></p>
                  
                </div>
              </div>
              <el-button class="btnAc btnS"> + 充值</el-button>
            </div>
          </div>
        </div>
        <div class="processList clearfix">
          <div class="processLeft">
            <span>第三步</span>
            <h2>运单支付</h2>
          </div>
          <div class="processRight">
            <div class="detail">
              <div class="left">
                <p class="title"><span><img src="@a/images/icon1.png" alt=""></span> <i>运单</i></p>
                <div class="number">
                  <p><i>{{deskData.order_num}}</i><span>共有</span></p>
                  <p><i>{{deskData.error_order_num}}</i><span>异常运单</span></p>
                  <p><i>{{deskData.unpaid_order_num}}</i><span>待支付</span></p>
                  <p><i>{{deskData.invoice_order_num}}</i><span>待开票</span></p>
                </div>
              </div>
              <el-button class="btnAc btnS"> + 新增</el-button>
            </div>
          </div>
        </div>
      </div>
      

    </el-card>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      isShow:true,    //公告关闭
      deskData:{
        announcement:'',    //公告
        balance_amount:'',    //账户余额
        company_name:'',    //  企业名称
        error_order_num:'',    // 异常运单
        invoice_order_num:'',    //待开票运单
        order_num:'',    //总运单数量
        run_driver:'',    //在途司机数量
        run_truck:'',    //在途车辆数量
        unpaid_order_num:'',    //待支付运单
        usable_driver:'',    //可使用司机数量
        usable_truck:''     //可使用车辆数量
      }
    };
  },
  created () {
    this.getWorkbench()
  },
  methods: {
    // 获取工作台数据
    async getWorkbench(){
      let res = await this.$http.loginApi.workbench();
      if(res.status === 200){
        console.log(res);
        if(!res.data.announcement || res.data.announcement == ''){
          this.isShow=false
        }else{
          this.isShow=true
        }
        this.deskData=res.data;
      }
    },

        addDriver(){
      this.$router.push('/driverdetail')
    },
    addTrucks(){
      this.$router.push('/trucksDetail')
    },
  },
};
</script>

<style scoped>
.nofixedTop{
  padding: 24px;
}
.bulletinbox {
  text-align: left;
  margin-bottom: 24px;

}
.bulletinleft {
  width: 24px;
  height: 24px;
  float: left;
  margin-right: 12px;
}
.bulletinText {
  color: #171717;
  font-size: 14px;
  float: left;
}
.bulletinText p {
  color: #171717;
  font-size: 12px;
  margin-top: 8px;
}
.closeBull{
  float: right;
  cursor: pointer;
  font-size: 16px;
}
.processTitle p{
  width: 170px;
}
.processTitle{
  padding: 13px 0 15px 22px;
  border-bottom:1px solid #EDEDED;
}
.processData{
  padding:24px;
}
.processList{
  background: #F2F6FC;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 24px;
}
.processList:last-of-type{
  margin-bottom: 0;
}
.processLeft{
  float: left;
  background: #E5EDF9;
  width: 128px;
  height: 100%;
  text-align: center;
  padding: 40px 32px;
}
.processLeft span{
  color: #8F92A1;
  font-size: 14px;
}
.processLeft h2{
  margin-top: 10px;
  color: #171717;
  font-size: 16px;
}
.processRight{
  display: flex;
}
.detail{
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px 20px 24px;
}
.detail:first-of-type{
  border-right: 1px solid #EDEDED;
}
.left .title{
  display: inline-flex;
  align-items: center;
  margin-bottom: 16px;
}
.left .title span{
  display: inline-block;
  width: 20px;
  margin-right: 8px;
}
.left .title i{
  color: #000000;
  font-size: 12px;
}
div.number p{
  display: inline-block;
  margin-right: 80px;
}
div.number i{
  margin-bottom: 8px;
  display: block;
  font-size:24px;
  color: #0C0F2C;
}
div.number{
  font-size: 12px;
  color: #8F92A1;
}
.btnS{
  width:92px;
}
</style>